<template>
  <div>
    <div class="card-header">
      {{ title }}
      <svg
        t="1671444629033"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1534"
        width="16"
        height="16"
      >
        <path
          d="M512 960c-119.466667 0-230.4-46.933333-315.733333-132.266667S64 631.466667 64 512c0-119.466667 46.933333-230.4 132.266667-315.733333S392.533333 64 512 64c119.466667 0 230.4 46.933333 315.733333 132.266667s132.266667 196.266667 132.266667 315.733333c0 119.466667-46.933333 230.4-132.266667 315.733333s-196.266667 132.266667-315.733333 132.266667z m0-853.333333c-106.666667 0-209.066667 42.666667-285.866667 119.466666C149.333333 302.933333 106.666667 405.333333 106.666667 512s42.666667 209.066667 119.466666 285.866667c76.8 76.8 179.2 119.466667 285.866667 119.466666s209.066667-42.666667 285.866667-119.466666 119.466667-179.2 119.466666-285.866667-42.666667-209.066667-119.466666-285.866667c-76.8-76.8-179.2-119.466667-285.866667-119.466666z"
          p-id="1535"
        ></path>
        <path
          d="M512 234.666667c29.866667 0 51.2 25.6 51.2 51.2S541.866667 341.333333 512 341.333333s-51.2-25.6-51.2-51.2 21.333333-55.466667 51.2-55.466666z"
          p-id="1536"
        ></path>
        <path
          d="M546.133333 725.333333h-42.666666v-277.333333h-21.333334v-42.666667h42.666667c12.8 0 21.333333 8.533333 21.333333 21.333334v298.666666z"
          p-id="1537"
        ></path>
        <path d="M448 704H597.333333v42.666667h-149.333333z" p-id="1538"></path>
      </svg>
    </div>
    <div class="card-content">{{ count }}</div>
    <div class="card-charts">
      <slot name="charts"></slot>
    </div>
    <div class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "Detail",
  props: ["title", "count"],
};
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  color: #d9d9d9;
}
.card-content {
  font-size: 30px;
  padding: 10px 0px;
}
.card-charts {
  height: 50px;
  margin-bottom: 15px;
}
.card-footer {
  border-top: 1px solid #eee;
  padding-top: 10px;
  height: 30px;
}
</style>
